<template>
  <div class="timeInfo" style="">
    <!-- <i class="el-icon-time"></i> -->
    <span class="timeInfo-ymd">{{ timeInfo.ymd }}</span>
    <span class="timeInfo-week">{{ timeInfo.week }}</span>
    <div class="timeInfo-time">{{ timeInfo.time }}</div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/utils.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      timeInfo: {
        ymd: "",
        week: "",
        time: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.initTime();
  },
  methods: {
    initTime() {
      clearInterval(this.$el.initTimer);
      //let timer = setInterval(() => {
      //  this.timeInfo.ymd = parseTime(new Date(), "{yy}-{mm}-{dd}");
      //  this.timeInfo.week = parseTime(new Date(), "星期{a}");
      //  this.timeInfo.time = parseTime(new Date(), "{hh}:{ii}:{ss}");
      //});
      //火狐33
      let timer = setInterval(() => {
        this.timeInfo.ymd = parseTime(new Date(), "{yy}/{mm}/{dd}");
        this.timeInfo.week = parseTime(new Date(), "星期{a}");
        this.timeInfo.time = parseTime(new Date(), "{hh}:{ii}:{ss}");
      }, 1000);
      this.$el.initTimer = timer;
    },
  },
};
</script>
<style scoped lang='scss'>
.timeInfo {
  font-family: Roboto-Bold, Roboto;
  font-weight: bold;
  color: #1977c4;
  text-align: right;
  width: 200px;
  padding: 5px 20px;

  .timeInfo-time {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #00CCFF;
  }

  .timeInfo-week {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
  }

  .timeInfo-ymd {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    padding-right: 5px;
  }

}
</style>

